
<template>
  <view class="like">
	<view class="jj tj-list">
    <view class="item" v-for="(itm,idx) in lineList" :key="itm.id">
    	<image :src="itm.img" mode="aspectFill"></image>
		<view class="topFixed">喜欢</view>
		<view class="infos">
			<view class="tit">{{itm.title}}</view>
			<view class="desc">
				<text class="text">{{itm.introduce}}</text>
			</view>
		</view>
		</view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { likeList } from '@/api/index.js'
import { ref } from 'vue'

const lineList = ref([])

onLoad(() =>{
	likeListData()
})

const likeListData = async () =>{
	let res = await likeList()
	lineList.value = res.data
	console.log(res)
} 
</script>

<style lang="scss" scoped>
.like{
	padding: 20rpx;
	box-sizing: border-box;
	.tj-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item{
			position: relative;
			width: 48%;
			margin-bottom: 20rpx;
			box-shadow: 1px 2px 3px #e5e5e5;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;
			.topFixed{
				position: absolute;
				top: 0;
				right: 0;
				border-top-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				background-color: #ffaa7f;
				color: #fff;
				text-align: center;
				font-size: 22rpx;
				padding: 5rpx 20rpx;
				box-sizing: border-box;
			}
			image{
				width: 100%;
				height: 200rpx;
			}
			.infos{
				padding: 10rpx 15rpx;
				.tit{
					font-size: 28rpx;
					font-weight: 700;
					margin-bottom: 15rpx;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.desc{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.text{
						font-size: 26rpx;
						color: #8a8a8a;
						overflow:hidden;
						display: -webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp: 2;
						// white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
}
</style>
